<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <!-- 标签页的内容 -->
        <!-- 高级搜索-->
        <button-search>
            <!-- 会匹配和使用到slot name=left的插槽 -->
            <template #left>
                <el-button type="success" size="mini" @click="openModel(false)">添加等级</el-button>
            </template>
            <!-- 右边的插槽,与button-search中的两个插槽内容相对应 -->
            <template #right>
                <div>
                    <small class="mr-2">选择升级标准:</small>
                    <el-radio-group v-model="level" size='mini'>
                        <el-radio-button :label="0">累计消费</el-radio-button>
                        <el-radio-button :label="1">累计次数</el-radio-button>
                    </el-radio-group>
                </div>
            </template>>
        </button-search>

        <!-- 商品列表 -->
        <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite;">
            <el-table-column label="会员等级" align="center" prop='name'>
            </el-table-column>
            <el-table-column label="升级条件" align="center">
                <template slot-scope="scope">
                    {{ getLevel.name + ':' + scope.row[getLevel.value] }}
                </template>
            </el-table-column>
            <el-table-column label="折扣率(%)" align="center" prop='discount'>

            </el-table-column>
            <el-table-column label="等级序号" align="center" prop='level'>
            </el-table-column>
            <el-table-column label="状态" align="center" prop='discount'>
                <template slot-scope="scope">

                    <el-button size="mini" plain @click="changeStatus(scope.row)"
                        :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用' : '禁用' }}</el-button>

                </template>
            </el-table-column>
            <el-table-column prop="ischeck" label="操作" align="center" width="250">
                <template slot-scope="scope">
                    <!-- slot-scope="scope"创建了一个名为scope的新作用域，
                             它包含了子组件传递给插槽的所有数据。然后我们可以使用v-for指令来遍历scope.items。 -->
                    <el-button type="text" icon="el-icon-arrow" size="mini" plain @click="openModel(scope)">修改
                    </el-button>
                    <el-button type="text" icon="el-icon-arrow" size="mini" plain @click="delItem(scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 底部 -->
        <div style="height: 60px;">
            <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
                style="bottom:0;left: 200px;right: 0; z-index: 100;">
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-footer>

            <!-- 新增、修改规格的模态框 -->
            <el-dialog title="添加等级" :visible.sync="createModel" top="5vh" width="35%">
                <!-- 表单内容 -->
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="等级名称" style="width:50%">
                        <el-input v-model="form.name" size="mini"></el-input>
                        <small class="text-secondary d-block">等级名称</small>

                    </el-form-item>
                    <el-form-item label="等级权重" style="width:50%">
                        <el-input type='number' v-model="form.level" size="mini"></el-input>
                        <small class="text-secondary d-block">权重</small>

                    </el-form-item>
                    <el-form-item label="是否启用">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="0">启用</el-radio>
                            <el-radio :label="1">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="升级条件">
                        <div>
                            <small class="mr-2">累计消费满</small>
                            <el-input type='number' style="width:45%" v-model="form.max_price" size="mini">
                                <template slot="append">元</template>
                            </el-input>
                            <small class="text-secondary ml-2">消费数目</small>
                        </div>
                        <div>
                            <small class="mr-2">累计次数满</small>
                            <el-input type='number' style="width:45%" v-model="form.max_times" size="mini">
                                <template slot="append">次</template>
                            </el-input>
                            <small class="text-secondary ml-2">消费次数</small>
                        </div>
                    </el-form-item>
                    <el-form-item label="折扣率">
                        <el-input type='number' size='mini' style="width:50%" v-model='form.discount' placeholder='折扣率'>
                        </el-input>
                        <small class="text-secondary d-block">请填写折扣率</small>

                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="createModel = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import buttonSearch from '@/components/common/button-search.vue';
import common from '@/common/mixins/common';
export default {
    name: 'userLevel',
    inject: ['app', 'layout'],
    mixins: [common],
    components: { buttonSearch },
    data() {
        return {
            preUrl: 'user_level',
            level: 0,
            search: {
                keyword: '',
                group_id: '',
                time: '',
            },
            form: {
                name: '',
                max_price: 0,
                max_times: 0,
                discount: 0,
                level: 0,
                status: 1,
            },
            tableData: [
                //     {
                //     name: '普通会员',
                //     max_price: 100,
                //     max_times: 10,
                //     discount: 10,
                //     level: 1,
                //     status: 1,
                //     create_time: '',
                // }
            ],
            // currentPage: 1,
            createModel: false,
            editIndex: -1,
        };
    },
    created() {

    },
    computed: {
        getLevel() {
            let arr = [{
                name: '累计消费',
                value: 'max_price'
            }, {
                name: '累计次数',
                value: 'max_times'
            }]
            return arr[this.level]
        }
    },
    methods: {
        getListResult(e) {
            // 获取列表数据
            // console.log('获取列表数据', e);
            this.tableData = e.list;

        },
        //  添加规格事件
        openModel(e = false) {
            // 如果e为false，说明是添加操作，执行添加操作
            if (!e) {
                // 初始化表单
                this.form = {
                    name: '',
                    max_price: 0,
                    max_times: 0,
                    discount: 0,
                    level: 0,
                    status: 1,
                }
                // 增加操作
                this.editIndex = -1
            } else {
                // 修改操作
                this.form = {
                    name: e.row.name,
                    max_price: e.row.max_price,
                    max_times: e.row.max_times,
                    discount: e.row.discount,
                    level: e.row.level,
                    status: e.row.status,
                }
                // 修改时设置
                this.editIndex = e.$index
            }
            this.createModel = true
        },
        submit() {
            // var msg = '添加'
            // if (this.editIndex == -1) {
            //     this.tableData.unshift(this.form)
            // } else {
            //     msg = '修改'
            //     let item = this.tableData[this.editIndex]
            //     item.name = this.form.name
            //     item.max_price = this.form.max_price
            //     item.max_times = this.form.max_times
            //     item.discount = this.form.discount
            //     item.level = this.form.level
            //     item.status = this.form.status
            // }
            // this.createModel = false
            // this.$message({
            //     message: msg + '成功',
            //     type: 'success',
            // });
            let id = 0
            if (this.editIndex !== -1) {
                // 修改操作
                id = this.tableData[this.editIndex].id;
            }
            this.addOrEdit(this.form,id)
            this.createModel = false;
        },

        // 用来加载数据，监听点的是哪一个tab
        handleClick() {
            // console.log(this.activeName);
        },

        // // 删除当前商品
        // delItem(scope) {
        //     this.$confirm('是否要删除该等级?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         this.tableData.splice(scope, 1)
        //         this.$message({
        //             type: 'success',
        //             message: '删除成功!'
        //         });
        //     })
        // },
        // // 修改状态
        // changeStatus(item) {
        //     // 请求服务端修改状态代码：

        //     // 修改前端
        //     item.status = !item.status
        //     this.$message({
        //         message: item.status ? '启用成功' : '禁用成功',
        //         type: 'success',
        //         duration: 2000
        //     })
        // },
        onSubmit() {
            console.log('submit!');
        },
        // 清空筛选条件
        clearSearch() {
            this.search = {
                keyword: '',
                group_id: '',
                time: '',
            }
            // this.$refs.buttonSearch[this.tabIndex].closeSuperSearch();
            console.log('清空搜索条件');
        },
        // 搜索事件
        searchEvent(e = false) {
            // 简单搜索,如果e有值
            if (typeof e === 'string') {
                return console.log("简单搜索事件", e)
            }
            // 高级搜索事件
            console.log("高级搜索")
        },
        // 选择头像
        // 选择图片
        chooseImage() {
            // 下面的chooseImage是来自于app.vue中的函数
            // 传递max参数为3，即最大选中chooseImage=3
            this.app.chooseImage((res) => {
                // 拿到当前第一个元素的url替换掉上方的span
                // console.log(res[0].url);
                // 修改image值对应到store中的good_create.js中的sku_card.list中的image的值
                this.form.avatar = res[0].url

            }, 3);
        },
    },
};
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>